<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>消息</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../css/sm.min.css">
		<link rel="stylesheet" href=" ../css/sm-extend.min.css">
		<link rel="stylesheet" href=" ../css/iconfont.css">
		<link rel="stylesheet" href="../css/forum-addTopic.css">
		
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<style type="text/css">
			#index{
				margin-top: 0.4rem;
			}
			.content {
				background-color: white;
			}
			/* 通知每行信息 */
			.content .row {
				margin-top: 0.6rem;
				margin-bottom:1rem ;
				height: 3rem;
			}
			/* 照片样式 */
			.row .img{
				height: 100%;
				width: 3rem;
				margin-right: 0.8rem;
				padding: 0.25rem;
			}
			 .img img{
				 height: 2.5rem;
				 width: 2.5rem;
				 border-radius: 1.5rem;
			 }
			.remind{
				font-size: 0.7rem;
			}
			/* 姓名蓝色 */
			.remind .name{
				font-size: 0.6rem;
				color: #0086BF;
			}
			/* 回复内容 */
			.reply{
				height: 1rem;
				overflow: hidden;
				font-size: 0.7rem;
			}
			.date{
				font-size: 0.7rem;
			}
			/* 已读为灰色 */
			.read{
				color: #a3a3a3;
			} 
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			/* tab2 */
			.list-block.media-list .item-title{
				font-size: 0.7rem;
				/* font-weight: 700; */
			}
			/* 头像圆角 */
			.my-photo img {
				border-radius: 1rem;
			}
			.list-block .item-subtitle {
			    font-size: 0.6rem;
			    color: rgb(150, 150, 150);
			}
			.list-block .userRead {
			    font-size: 0.6rem;
			    color: rgb(0, 0, 0);
			}
			#tab2 .list-block{
				margin: 0;
			}
			/* 取消细线 */
			.list-block ul:before{
				content:none;
			}
			.list-block ul:after{
				content:none;
			}
			/* 我的内容间距调整 */
			#my-content{
				margin: 0.5rem 0;
				max-height: 4rem;
				overflow: hidden;
			}
			/* li的左间距 */
			#tab2 .card-content li{
				padding: 0.25rem;
			}
			/* 不同回复间下划线 */
			.my-cont{
				padding-bottom: 0.25rem;
				/* border-bottom: rgb(150,150,150) 1px solid; */
			}
			/* popup遮罩异常 */
			.modal-overlay.modal-overlay-visible,
			.popup-overlay.modal-overlay-visible,
			.preloader-indicator-overlay.modal-overlay-visible {
				visibility: hidden;
			}
			/* 我的关心用户 */
			.row .col-33{
				padding-left: 0.6rem;
			}
			.myContent li{
				height: 3rem;
			}
			
			.myContent .card-content{
				margin-bottom: 1rem;
			}
			.myContent .card-content .userLi>div{
				height: 100%;
				padding: 0.25rem;
				margin-left: 0.2rem;
			}
			
			.myContent .my-photo{
				margin-left: 0;
			}
			.myContent img{
				height: 100%;
				width: 2.5rem;
				border-radius: 1.25rem;
			}
			.myContent .item-title-row .item-title{
				/* font-family: "新宋体"; */
				font-size: 0.7rem;
			}
			.myContent .my-user{
				margin-top: 0.3rem;
				font-size: 0.7rem;
			}
			#tab3 .myContent .card-content .userLi .my-photo{
				margin-left: 0.5rem;
			}
			
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">

			<!-- 工具栏 -->
			<nav class="bar bar-tab">
				<a class="tab-item external " href="forum-index.html">
					<span class="icon iconfont icon-Moneymanagement"></span>
					<span class="tab-label">动态</span>
				</a>
				<a class="tab-item external" href="forum-community.html">
					<span class="icon iconfont icon-chengshi"></span>
					<span class="tab-label">社区</span>
				</a>
				<a class="open-popup tab-item external" data-popup=".popup-addTopic" href="#">
					<span class="icon iconfont icon-chuangzuo"></span>
					<span class="tab-label">发布</span>
				</a>
				<a class="tab-item external active" href="#">
					<span class="icon iconfont icon-message"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="forum-user-centre.html?userId=null">
					<span class="icon iconfont icon-peoplelist"></span>
					<span class="tab-label">我的</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				<!-- 标题栏 -->
				<div class="buttons-tab fixed-tab" data-offset="0">
					<a href="#tab1" class="tab-link active button">通知</a>
					<a href="#tab2" class="tab-link button">回复</a>
					<a href="#tab3" class="tab-link button">私信</a>
					<a class="button" style="width: 20%;">
						<span class="icon iconfont icon-friend open-popup" data-popup=".popup-attention"></span>
					</a>
				</div>
				
				<div class="tabs  content-padded">
					<!-- 通知 -->
					<div id="tab1" class="tab active infinite-scroll" data-distance="50">
						
						<div v-if="userMes!=null" class="row" v-for="item in userMes">
							<div class="col-33 img">
								<a :href="userHtml(item.user.id)">
									<img :src="imgSrc(item.user.photo)" >
								</a>
							</div>
							<div :class="classSelect(item.isRead)">
								<div class="remind">
									<span class="name">
										@{{item.user.nickname}}
									</span>
									<span v-if="item.type==0">
										赞了您的回复
									</span>
									<span v-if="item.type==1">
										赞了您的话题
									</span>
								</div>
								<div class="reply">
									<a :href="topicHref(item.topicId)">
										<span>
											{{item.content}}
										</span>
									</a>
								</div>
								<div class="date">
									<span>
										{{timeCount(item.date)}}
									</span>
								</div>
							</div>
						</div>
						
					</div>
					
					<!-- 回复 -->
					<div id="tab2" class="tab infinite-scroll" data-distance="50">
						<div id="tab2Content">
							
						
							<!-- 回复用户信息 -->
							<!-- <div class="card-content">
								<div class="list-block media-list">
									<ul>
										<li class="item-content">
											<div class="item-media my-photo">
												<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg"
												 width="35">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
													<div class="item-title">
														<span style="font-weight: 800;">流水芳华</span>
														<span>回复了您</span>
													</div>
												</div>
												<div class="item-subtitle my-user">
													12：50
												</div>
											</div>
										</li>
									</ul>
								</div>
							</div>
							<!--回复内容 --
							<div class="my-cont">
								<!-- 回复 --
								<div id="" style="margin-top: 0rem;">
									<span style="font-size: 0.75rem;">
										说话太粗路了
									</span>
								</div>
								<!-- 我的内容 --
								<div id="my-content" style="border: rgb(170, 170, 170) 1px solid; border-radius: 0.5rem; padding: 0.2rem;">
									<span style="font-size: 0.6rem;color: rgb(222, 144, 0);">
										我的话题 >
									</span>
									<span style="font-size: 0.7rem;color: rgb(121, 121, 121);">
										话题安达市大所大所多安达市大所大所多安达市安达市大所大所多安达市大所大所多安达市大所大所多安达市大所大所多<br>
									</span>
								</div>
							</div> -->
						
						
						</div>
						<!-- 加载提示符 -->
						<div class="infinite-scroll-preloader">
							<div class="preloader"></div>
						</div>
					</div>
					
					<!-- 私信 -->
					<div id="tab3" class="tab" data-distance="50">
						<div class="myContent" style="margin-top: 0.5rem;">
							
							<div class="card-content" v-for="item in latelyUser">
								<div class="list-block media-list" style="margin: 0;">
									<ul>
										<a :href="chatHref(item.centerUser.id)">
										<li class="item-content userLi" style="padding: 0;">
											<div class="item-media my-photo">
												<img :src="imgSrc(item.centerUser.photo)">
											</div>
											<div class="item-inner">
												<div class="item-title-row">
													<div class="item-title"style="width: 100%;">
														<div style="float: left;">
															<span style="font-weight: 800;">{{item.centerUser.nickname}}</span>
														</div>
														<div style="float: right;">
															<span style="color: rgb(150,150,150); font-size: 0.6rem;">{{timeCount(item.forumMessage.date)}}</span>
														</div>
													</div>
												</div>
												<!-- 判断已读 -->
												<div v-if="item.forumMessage.status==0||item.forumMessage.userId!=item.centerUser.id" class="item-subtitle my-user">
													<span v-if="imgCheck(item.forumMessage.content)">(图片)</span>
													<span v-else>{{item.forumMessage.content}}</span>
												</div>
												<div v-else class="userRead my-user">
													<span v-if="imgCheck(item.forumMessage.content)">(图片)</span>
													<span v-else>{{item.forumMessage.content}}</span>
												</div>
											</div>
										</li>
										</a>
									</ul>
								</div>
							</div>
							
						</div>
					</div>
				</div>	
				
			</div>
			
			
			<!-- 关注人窗口 -->
			<div class="popup popup-attention">
				<div class="content-block" style="margin-top: 0.5rem;">
					<!-- 工具栏 -->
					<div class="inform-top row" style="height: auto; margin-bottom: 0;">
						<div class="t1 col-33">
							<span class="close-popup iconfont icon-fanhui"></span>
						</div>
						<div class="t2 col-33">
							<span id="informName">我的关心</span>
						</div>
					</div>
					<div class="myContent" style="margin-top: 0.5rem;">
						
						<div class="card-content" v-for="item in attentionUser">
							<div class="list-block media-list" style="margin: 0;">
								<ul>
									<a :href="chatHref(item.id)">
									<li class="item-content userLi" style="padding: 0;">
										<div class="item-media my-photo">
											<img :src="imgSrc(item.photo)">
										</div>
										<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title">
													<span style="font-weight: 800;">{{item.nickname}}</span>
												</div>
											</div>
											<div class="item-subtitle my-user" style="color: #000000;">
												{{item.intro}}
											</div>
										</div>
									</li>
									</a>
								</ul>
							</div>
						</div>
						
						
						
					</div>
					
				</div>
			</div>
			
		</div>
		<!-- 发布消息 -->
		<div class="popup popup-addTopic">
			<div class="content-block">
				<!-- 工具栏 -->
				<div class="addTopic-top row">
					<div class="t1 col-33">
						<span class="close-popup iconfont icon-fanhui"></span>
					</div>
					<div class="t2 col-33">
						<span>我的动态</span>
					</div>
					<div @click="addTopic" class="t3 col-33">
						<span>发布</span>
					</div>
				</div>
				<!-- 输入区域 -->
				<div id="addTopic-count" class="item-content list-block">
					<textarea id="topicContent" name="topicContent" maxlength="10000" required placeholder="尽情发挥吧..."></textarea>
				</div>
				<!-- 图片 -->
				<div id="addTopic-img" class="row">
					<div v-for="(item,index) in imgs" class="userImg col-33">
						<span @click="delImg(index)" class="imgDel iconfont icon-shanchu"></span>
						<img :src="imgSrc(item)">
					</div>
					<div v-if="imgs.length<3" class="userImg col-33">
						<!--  -->
						<form id="imgForm" method="post" enctype="multipart/form-data">
							<input type="file" @change="addImgMethod" id="addImg" name="img" accept="image/jpeg" />
						</form>
						<img src="../img/iconfont-tianjia.png">
					</div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src="../js/forum-addTopic.js"></script>
		<script src="../js/config.js"></script>
		<script type="text/javascript">
			
			//绑定vue
			var app = new Vue({
				el: ".page",
				data: {
					userMes: null,
					attentionUser:null,
					latelyUser:null
				},
				created() {
					/* 加载数据 */
					this.ajax();
				},
				methods: {
					ajax: function() {
						//加载通知
						axios.get(serviceIP+"/forum/findRemind",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
							this.userMes = result.data.data;
						});
						//加载我的关注
						axios.get(serviceIP+"/forum/userContent?findUser=null",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
							this.attentionUser = result.data.data;
						});
						//加载我的关注
						axios.get(serviceIP+"/forum/latelyUser",{headers:{"token":token,"refreshtoken":refreshtoken}}).then(result => {
							this.latelyUser = result.data.data;
						});
					},
					/* 照片 */
					imgSrc: function(src) {
						return imgSrc(src);
					},
					/* 照片判断 */
					imgCheck: function(content) {
						return content.startsWith("<img src=");
					},
					/* 话题跳转 */
					topicHref: function(topicId) {
						return "forum-Topic.html?topicId=" + topicId;
					},
					/* 聊天窗口跳转 */
					chatHref: function(oppositeUserId) {
						return "forum-chat.html?oppositeUserId=" + oppositeUserId;
					},
					/* 用户界面跳转 */
					userHtml:function(id){
						return "forum-other-centre.html?userId="+id;
					},
					//发表时间计算
					timeCount: function(time) {
						return timeCount(time);
					},
					classSelect:function(type) {
						if(type==0){
							return "mes read";
						}else{
							return "mes";
						}
					}
				}
			});
		</script>
		<script type="text/javascript">
			/* 发送时间计算 */
			function timeCount(time) {
				var num = new Date().getTime() - Date.parse(time);
				var date = new Date(Date.parse(time));
				//一小时以内
				if (num < 3600000) {
					return Math.ceil(num / 60000) + '分钟前';
				} else if (date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0)) {
					//今天发送的
					return time.substring(11, 16);
				} else {
					//之前的信息
					return time.substring(0, 10);
				}
			}
			/* 图片地址 */
			function imgSrc(src){
				return  src;
			}
		</script>
		<!-- 回复页面加载 -->
		<script>
			// 加载flag
			var loading = false;
			// 最多可加载的条目
			var maxItems = 100;
			// 每次加载添加多少条目
			var itemsPerLoad = 5;
			// 初始页
			var lastIndex = 1;
			// 生成新条目的HTML
			function replyMes(replyMes) {
				
				
				html='<div class="card-content">'
				+'	<div class="list-block media-list">'
				+'		<ul>'
				+'			<li class="item-content">'
				+'				<div class="item-media my-photo">'
				+'<a href="forum-other-centre.html?userId='+replyMes.centerUser.id+'"><img src="'+imgSrc(replyMes.centerUser.photo)+'"'
				+'					 width="35" height="35"></a>'
				+'				</div>'
				+'				<div class="item-inner">'
				+'					<div class="item-title-row">'
				+'						<div class="item-title">'
				+'							<span style="font-weight: 800;">'+replyMes.centerUser.nickname+'</span>'
				+'							<span>回复了您</span>'
				+'						</div>'
				+'					</div>'
				+'					<div class="item-subtitle my-user">'
				+						timeCount(replyMes.forumReply.date)
				+'					</div>'
				+'				</div>'
				+'			</li>'
				+'		</ul>'
				+'	</div>'
				+'</div>'
				<!--回复内容 -->
				+'<div class="my-cont">'
				+'	<!-- 回复 -->'
				+'	<div id="" style="margin-top: 0rem;">'
				+'		<span style="font-size: 0.75rem;">'
				+		'<a href="forum-Topic.html?topicId='+replyMes.forumReply.topicId+'">'+replyMes.forumReply.content
				+'		</a></span>'
				+'	</div>'
				+'	<div id="my-content" style="border: rgb(170, 170, 170) 1px solid; border-radius: 0.5rem; padding: 0.2rem;">'
				+'		<span style="font-size: 0.6rem;color: rgb(222, 144, 0);">';
				
				if(replyMes.forumReply.replyId==null){
					html+='我的话题 >';
				}else{
					html+='我的回复 >';
				}		
				
				html+='		</span>'
				+'		<span style="font-size: 0.7rem;color: rgb(121, 121, 121);">'
				+			'<a href="forum-Topic.html?topicId='+replyMes.forumReply.topicId+'">'+replyMes.content+'</a><br>'
				+'		</span>'
				+'	</div>'
				+'</div>';
				
		
				// 添加新条目
				$('#tab2 #tab2Content').append(html);
			}
			//异步请求封装
			function aja() {
				// 如果正在加载，则退出
				if (loading) return;
				// 设置flag
				loading = true;
				//请求加载信息
				$.ajax({
					type: 'get',
					url: serviceIP+"/forum/replyRemind",
					dataType: 'json',
						data:{
							page: lastIndex,
							limit: itemsPerLoad
						},
					headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
					success:function (data) {
						// 重置加载flag
						loading = false;
						//页面遍历添加
						$.each(data.data.list, function(i, item) {
							replyMes(item);
						});
						// 更新最后加载的序号
						lastIndex++;
						//无数据
						if (data.data.size < itemsPerLoad) {
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
						}
						if (data.data.size < 1) {
							// 加载完毕，则注销无限加载事件，以防不必要的加载
							$.detachInfiniteScroll($('.infinite-scroll'));
							// 删除加载提示符
							$('.infinite-scroll-preloader').remove();
							//提醒
							$.toast("无更多信息！");
							return;
						}
						//容器发生改变,如果是js滚动，需要刷新滚动
						$.refreshScroller();
					}
				});
			}
			// 注册'infinite'事件处理函数
			$(document).on('infinite', function() {
				aja();
			});
			aja();
		</script>
		<script>
			$.init();
		</script>
	</body>

</html>
